﻿<div class="row clearfix" ng-controller="SearchController">
    <div class="col-md-12">

        <table class="table table-bordered table-striped">
            <tr>
                <th>Song Title</th>
                <th>Artist</th>
                <th>Album</th>
                <th>Art</th>
                <th></th>
            </tr>
            <tr ng-repeat="song in songs">
                <td>
                    <span ng-hide="editing">
                        {{song.Title}}
                    </span>               
                    <input type="text" ng-model="song.Title" ng-hide="!editing" />    
                </td>
                <td>
                    <span ng-hide="editing">
                        {{song.Artist}}
                    </span>
                    <input type="text" ng-model="song.Artist" ng-hide="!editing" />
                </td>
                <td>
                    <span ng-hide="editing">
                        {{song.Album}}
                    </span>
                    <input type="text" ng-model="song.Album" ng-hide="!editing" />
                </td>
                <td>
                    <span ng-hide="editing">
                        <img src={{song.AlbumArt}} height=75 width=75 />
                    </span>
                    <input type="text" ng-model="sond.AlbumArt" ng-hide="!editing" />
                </td>
                <td>
                    <button ng-click="editing=true" ng-hide="editing">Edit</button>
                    <button ng-click="deleteSong(song)" ng-hide="editing">Delete</button>
                    <button ng-click="editing=false; updateSong(song)" ng-hide="!editing">Save</button>
                    <button ng-click="editing=false" ng-hide="!editing">Cancel</button>
                </td>
            </tr>
        </table>

            <h3>Add New Song to Database</h3>
            <form>
                <input type="text" ng-model="newSong.Title" placeholder="Enter New Song Title" /><br />
                <input type="text" ng-model="newSong.Artist" placeholder="Enter New Song Artist" /><br />
                <input type="text" ng-model="newSong.Album" placeholder="Enter New  Song Album" /><br />
                <input type="text" ng-model="newSong.AlbumArt" placeholder="Enter New Song Album Art" /><br />
                <label>Select Song Genre</label><br />
                <select ng-model="newSong.GenreId">
                    <option ng-repeat="genre in genres" value="{{genre.GenreId}}">{{genre.Name}}</option>
                </select><br />
                <button ng-click="addSong(newSong)">Submit New Song</button>
            </form>

        </div>
</div>